<template>
    <div class="broken-record-wrap">
        <el-timeline>
            <el-timeline-item v-for="(item, index) in recordsList" :key="index" :timestamp="item.storageTime" hide-timestamp>
                    <p>{{item.storageTime+'发生 —— '+(item.resetTime ? item.resetTime : '暂未')+'复位'}}</p>
                    <el-row class="marg">
                        <el-col :span="12">
                            <p class="duration type-color-2">故障持续时间：{{item.continueTimeStr}}</p>
                        </el-col>
                        <!-- <el-col :span="10">
                            <el-progress :text-inside="true" :stroke-width="20" :percentage="calculationPercent(item.continueTime)" :show-text="false"></el-progress>
                        </el-col> -->
                    </el-row>
                    <!-- <el-link type="primary" @click="jumpOtherPage(item.id)">查看故障维修记录单</el-link> -->
            </el-timeline-item>
        </el-timeline>
        <p v-if="recordsList.length == 0">暂无数据</p>
        <el-button type="primary" v-if="currentPageIndex < (Math.ceil(total/5) - 1) " @click="getRecords(currentPageIndex+1)">查看更多</el-button>
    </div>
</template>
<script>
import { selectRecordsInfoDetailsList } from '@/api/alarm'

export default {
    name: 'BrokenRecord',
    props: {
        info: {
            required: true
        }
    },
    data() {
        return {
            recordsList: [],
            // 分页
            total: 0,
            currentPageIndex: 0
        }
    },
    created() {
        this.getRecords()
    },
    methods: {
        getRecords(pageIndex) {
            let that = this
            if(pageIndex) {
                that.currentPageIndex = pageIndex
            }
            let parmes = {
                fcFsId: that.info.id,
                fireTType: '20',
                queryType: '1',
                pageSize: '5',
                pageIndex: that.currentPageIndex
            }
            selectRecordsInfoDetailsList(parmes).then(res => {
                that.recordsList = that.recordsList.concat(res.data)
                that.total = res.total
            })
        },
        calculationPercent(val) {
            let result = val/(24*60*60*1000)
            if (result > 1) {
                return 100
            } else {
                return result*100
            }
        },
        jumpOtherPage(id) {
            this.$router.push({
                name:'hiddenDangerRectification'
            })
        }
    },

}
</script>
<style lang="scss">
.broken-record-wrap {
    .marg {
        padding: 10px 0;
        .duration{
            display: inline-block;
            padding: 0 15px;
            height: 24px;
            line-height: 24px;
            border-radius: 12px;
            color: #FFF;
        }
    }
}
</style>
